React Native单元测试
参考文章:https://blog.csdn.net/xiangzhihong8/article/details/83547346配置Babelyarn add --dev babel-jest babel-core regenerator-runtime完整配置为了方便查看, 下面是package.json文件的完整配置:{ "name": "jest_enzyme", "version": "0.0.1", "private": true, "scripts": { "start": "n...
2024-01-10React Native开发入门
目录:一、前言二、什么是React Native三、开发环境搭建四、预备知识五、最简单的React Native小程序六、总结七、参考资料 一、前言虽然只是简单的了解了一下React的皮毛,但是对React Native的学习就轻松了好多。所以在学习React Native之前,最好还是先学习一下React。因为我学习的iOS开发,对iOS更...
2024-01-10配置React Native环境
“Homebrew installs the stuff you need that Apple didn’t.——Homebrew OS X 更完整”。 Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki。 brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默认安装了ruby":ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Ho...
2024-01-10React Native自定义导航栏
之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 … 从零学React Native之03页面导航 …经过之前的学习, 我们可以完成一个自定义导航栏了, 效果如下: 我们需要创建一个 NaviBar.js 用来显示顶部的导航栏, 还需要四个界面(Page1.js,Page2.js,Page3.js,Page4.js)。 当然还需要修改...
2024-01-10什么是React-Native?
写在前面1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台,同年9月份,该开源项...
2024-01-10React Native中解析HTML
使用这个react-native-htmlview可以解析HTML字符串。实现效果和vue中的v-html指令或jQuery中$(Selector).html()相同示例:import React from 'react'import {Text,View} from 'react-native'import HTMLView from 'react-native-htmlview'export default class Favorites extends React.Component{ rend...
2024-01-10React-Native性能优化点
shouldComponentUpdate确保组件在渲染之后不需要再更新的,即静态组件,尽量在其中增加shouldComponentUpdate方法,防止二次消耗所产生的性能消耗shouldComponentUpdate() { //完全静态的组件,无需更新 return false;}keykey是react的一个特殊的属性,它是给React自己用的。如果我们动态地创建 React 元素,而且 React ...
2024-01-10React Native填坑之旅--动画
动画是提高用户体验不可缺少的一个元素。恰如其分的动画可以让用户更明确的感知当前的操作是什么。无疑在使用React Native开发应用的时候也需要动画。这就需要知道RN都给我们提供了那些动画,和每个动画可以处理的功能有哪些。填坑材料Animated动画API提供了一些现成的组件:Animated.View,Animated.T...
2024-01-10React Native 之 数据持久化
前言因为 实战项目系列 涉及到数据持久化,这边就来补充一下。如本文有错或理解偏差欢迎联系我,会尽快改正更新!如有什么问题,也可直接通过邮箱 277511806@qq.com 联系我。demo链接: https://pan.baidu.com/s/1hsspiio 密码: dk3h数据持久化数据持久化一直都是软件开发中重要的一个环节,几乎所有...
2024-01-10React Native :加载新闻列表
代码地址如下:http://www.demodashi.com/demo/13212.html标签与内容页联动上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的视图进行联动。首先创建 NewsList.js :import React from 'react'import { View, Text, ListView, Image, StyleSheet, Dimensions} from 'react-native'const {wi...
2024-01-10皇帝的新装-React-Native
先看看React-Native的介绍。React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习...
2024-01-10React Native入门遇到的一些问题
本文示例参考自《React Native第一课》 React Native官方文档中文版(含最新Android内容) 这里只大概记录下我的操作步骤和遇到的问题,一定要牢记下面这条: 如果你在Mac下遇到提示写入权限时,记得在命令前加上sudo 安装开发所需要的环境,参考这里>> 我所遇到的几个问题: 1) 安装brew curl -LsSf http://gith...
2024-01-10[RN] React Native 调试技巧
React Native 调试技巧一、 安卓模拟器调出Dev Setting 命令adb shell input keyevent 82二、图片不出来时,先运行此命令,再重新 runreact-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/s...
2024-01-10React Native 常用的 15 个库
本篇 react native 库列表不是从网上随便找的, 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有,但经过大量研究并在我的程序中尝试后,我选择了这些库。15. React Native Animatable这个库非常适合快速地向 react Native 应用程序添加简单的动画和转换。这个库有两种使用方式:声明式...
2024-01-10React Native 设置RGBA背景色
React Native 设置RGBA背景色:可以先用Mac自带吸色工具,获取RGB值,然后设置背景如下:backgroundColor: 'rgba(52, 52, 52, 0.8)',透明度值也可以如下设置:backgroundColor:'rgba(52,52,52,alpha)',...
2024-01-10React Native与OC之间通信那些事
React Native用IOS自带的JavaScriptCore作为JS的解析引擎,普通的JS-OC通信就是React Native在OC定义一个模块方法,JS可以直接调用这个模块方法并还可以无缝衔接回调。http://www.jianshu.com/p/c95d62190781作者:IMWeb-朱灵子http://imweb.io/topic/5812ab7be2017a3d1878b508具体的接口调用实现方法如下所示:将OC注册进来的模块...
2024-01-10设置React native 本地镜像源
npm get registry // 获取本地镜像源npm set registry http://47.99.200.213:4873 // 设置本地镜像源npm ERR! code ETARGETnpm ERR! notarget No matching version found for [email protected]npm ERR! notarget In most cases you or one of your dependencies are requestingnpm ERR! n...
2024-01-10[React Native] 解析JSON文件
在编写代码时,开发者有时需要存储一些比较多,在应用程序运行时不需要更改的数据。文件大不便于写在代码中,可以把这些数据存储到JSON文件中。优点非常明显: 1. 数据存放在单独的文件中,代码精简有条理。 2. JSON数据格式便于阅读,修改。给大家演示下,在项目目录下建立一个名为data的目...
2024-01-10React Native SDK for OSS
此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文章《从0开始搭建React Native for OSS项目》。背景OSS支持React Native SDK,主要有以下几个原因。React Native跨平台开发...
2024-01-10[RN] React Native 实现图片预览
[RN] React Native 实现图片预览效果预览:代码如下:'use strict';import React, {Component} from 'react';import {Image, StyleSheet, Text, View, ViewPagerAndroid, Dimensions} from 'react-native';const {width, height} = Dimensions.get("window");//图片地址const PAGE_IMAGES = [ '...
2024-01-10React-Native 环境搭建和使用模拟器调试
关于React-NativeReact native源自React,React 是一套可以用简洁的语法高效绘制Dom的框架。React中需要使用JSX语法,JSX是对JavaScript的扩展。JSX可以将CSS,HTML,表达式进行一起书写,简化了html代码书写的形式。优势跨平台兼容性使用React Native,您可以编写一次代码并多次部署到Android和iOS操作系统。对于...
2024-01-10现有iOS项目集成React Native过程记录
在搭建配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用它,只是有时安装库很慢,还不如复制粘贴库来的快,就删除它了,这里就使用手动集成的方式吧。 1. 新增React Native文件路径和json说明文件,进入项目根目录(*.xcodeproj文...
2024-01-10React Native 开发之 IDE 选型和配置
React Native 发布一年多了,有不少公司已经在线上产品中或小范围试水,或大范围应用,很多公司或开发者都在为 React Native 的生态系统作出自己的贡献。React Native 的开发基本上是 Javascript + 系统原生开发语言(Java,Objective-C,Swift),原生语言的开发所用的 IDE 没有多余的选择,Android 平台只能使用 An...
2024-01-10React-Native中props具体使用详解
props就是属性,是为了描述一个组件的特征而存在的。它是父组件传递给子组件的。使用props通过上一个页面传递新建一个 PropsTest.js 文件exprot default class PropsTestextendesComponent{ render(){ return <Text>{this.props.name}</Text> }}在上一个页面中使用PropsTest组件import PropsTest from './PropsTest'<PropsTest name = '...
2024-01-10React-native真机调试遇到的问题
React-native真机调试遇到的问题打开官网,有关于如何真机调试的文档:https://reactnative.cn/docs/running-on-device/第一步准备工具: 1、iPhone手机 2、usb数据线 3、Apple ID连上数据线之后,打开Xcode,设置:如果这是第一次在iOS设备上运行app,需要注册开发设备。从Xcode菜单栏打开Product菜单,然后...
2024-01-10